<template>
  <div class="search-container">
    <!-- 搜索栏 -->
      <form action="/" class="search-form">
        <van-search
          v-model="searchText"
          show-action
          placeholder="请输入搜索关键词"
          background="#3296fa"
          @search="onSearch"
          @cancel="onCancel"
          @focus="isResultShow = false"
        />
        <!-- @focus="isResultShow = false" 当搜索结果出来后 光标再次聚焦搜索框时 搜索结果隐藏,搜索记录显示 -->
      </form>
      <!-- 搜索栏结束 -->

      <!-- 搜索结果 -->
      <SearchResults
      v-if="this.isResultShow"
      :searchText="searchText"
      ></SearchResults>
      <!-- 搜索结果结束 -->

      <!-- 联想搜索 -->
      <SearchSuggestion
      v-else-if="this.searchText"
      :searchText="searchText"
      @search="onSearch"
      >
      <!-- :searchText="searchText" 属性绑定 向子组件<search-suggestion></search-suggestion>传值 -->
      </SearchSuggestion>
      <!-- 联想搜索结束 -->

      <!-- 搜索历史记录 -->
      <SearchHistory
      v-else
      :searchHistories="searchHistories"
      @search="onSearch"
      >
      </SearchHistory>
      <!-- 搜索历史记录结束 -->

  </div>
</template>

<script>
// import { Toast } from 'vant'
import SearchHistory from '@/views/search/components/search-history.vue'
import SearchResults from '@/views/search/components/search-results.vue'
import SearchSuggestion from '@/views/search/components/search-suggestion.vue'
import { setItem, getItem } from '@/utils/localStorage.js'

export default {
  name: 'SearchIndex',
  components: {
    SearchHistory,
    SearchResults,
    SearchSuggestion
  },
  data () {
    return {
      searchText: '', // 输入框的value内容
      isResultShow: false, // 是否显示 搜索结果 面板
      searchHistories: getItem('TOUTIAO_SEARCH_HISTORIES') || [] // 搜索历史记录 的具体数据
      // 做了数据持久化处理后 从本地存储读取数据 因为第一次使用时本地存储为null 所以用到了 []
    }
  },
  methods: {
    onSearch(val) { // 搜索框点击回车后 触发该方法
      this.searchText = val // 更新搜索文本框内容 val为搜索框的内容 自带这个功能
      // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 返回结果为索引号 如果此字符串中没有这样的字符，则返回 -1。
      const num = this.searchHistories.indexOf(val) // 不仅可以用于字符串 也同样适用于数组
      if (num !== -1) { // 说明有相同的元素
        this.searchHistories.splice(num, 1) // splice方法删除指定位置的数组元素 无论有没有定义参数接收,都会修改原数组
      }
      this.searchHistories.unshift(val) // 插入到最前面
      this.isResultShow = true // 显示 搜索结果 面板
      // Toast(val)
    },
    onCancel() { // 点击搜索框的取消 触发此方法
      // Toast('取消')
      this.$router.back() // 返回上一个页面
    }
  },
  watch: {
    searchHistories: {
      handler (newval) { // handler 第一个参数为新值 第二个参数为旧值
        // console.log(this.searchHistories)
        setItem('TOUTIAO_SEARCH_HISTORIES', newval)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  padding-top: 108px;

  .van-search__action {
    color: #fff;
  }

  .search-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
